<template>
  <div class="context-page">
    <ul class="route-nav-gather">
      <li
        v-for="(item, index) in ROUTE_NAV_OPTIONS"
        :key="index"
        :class="{ active: componentName === item.component }"
        @click="navChange(item)"
      >
        <Icon :type="item.icon" size="20" />
        <span>{{ item.label }}</span>
      </li>
    </ul>

    <component class="child-context" :is="componentName" />
  </div>
</template>

<script setup>
import { ref, markRaw } from 'vue'

import Home from './Home/index.vue'
import Scene from './Scene/index.vue'
import Sheet from './Sheet/index.vue'
import Visitor from './Visitor/index.vue'
import Evaluation from './Evaluation/index.vue'
import Maintenance from './Maintenance/index.vue'

const ROUTE_NAV_OPTIONS = ref([
  { label: '业务首页', component: markRaw(Home), icon: 'md-home' },
  { label: '场景中心', component: markRaw(Scene), icon: 'md-bookmark' },
  { label: '表单管理', component: markRaw(Sheet), icon: 'ios-paper' },
  { label: '访客记录', component: markRaw(Visitor), icon: 'md-people' },
  { label: '测评记录', component: markRaw(Evaluation), icon: 'ios-map' },
  { label: '数据报表', icon: 'ios-podium' },
  { label: '产品维护', component: markRaw(Maintenance), icon: 'ios-clock' },
])

const componentName = ref(ROUTE_NAV_OPTIONS.value[0].component)
const navChange = (data) => {
  if(!data.component) return

  componentName.value = data.component
}
</script>

<style scoped lang="scss">
.context-page {
  display: flex;
  .route-nav-gather {
    min-width: 260px;
    width: 260px;
    height: calc(100vh - 108px);
    overflow-y: auto;
    padding: 24px 32px;
    background-color: #fff;
    border-radius: 8px;
    margin-right: 8px;
    > li {
      font-size: 18px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:nth-child(n+2) {
        margin-top: 16px;
      }
      &:hover,
      &.active {
        color: #2d8cf0;
      }
      >span{
        margin-left: 4px;
      }
    }
  }
  .child-context {
    flex: 1;
    padding-right: 8px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
  }
}
</style>
